<template>
    <div class="container">
        <!-- top -->
        <div class="top">
            <div class="top-left">
                <img src="https://imagev2.xmcdn.com/storages/3777-audiofreehighqps/49/07/GMCoOSMH3Kb7AAAPQgH_va2X.png"
                    alt="">
            </div>
            <div class="search">
                <i><svg t="1704868812158" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7189" width="20" height="20"><path d="M776.3 467c0-84.1-32.8-163.2-92.3-222.7-59.4-59.5-138.5-92.3-222.7-92.3s-163.2 32.8-222.7 92.3-92.3 138.6-92.3 222.7 32.8 163.2 92.3 222.7S377.2 782 461.3 782s163.2-32.8 222.7-92.3c59.6-59.5 92.3-138.6 92.3-222.7z m-315 255c-140.6 0-255-114.4-255-255s114.4-255 255-255 255 114.4 255 255-114.4 255-255 255zM864.4 776.1l-97.5-97.5c-17.7-17.7-46.7-17.7-64.5 0l-19 19c-17.7 17.7-17.7 46.7 0 64.5l97.5 97.5c17.7 17.7 46.7 17.7 64.5 0l19-19c17.7-17.7 17.7-46.7 0-64.5z" fill="#B3B3B3" p-id="7190"></path></svg></i>
                <span>搜索</span>
            </div>
            <a class="top-right">
                <span>打开APP</span>
            </a>
        </div>
        <div id="award">
            <div class="top">
                <!-- tabbar内容 -->
                <div class="tabbar">
                    <div class="custom-scrollbar">
                        <div class="scrollbar-flex-content" style="border-bottom: 2px solid #f6f6f6;">
                            <div v-for="(item, index) in rankList" :key="index" class="scrollbar-demo-item"
                                :class="{ active: isActive == index }" @click="addActive(index,item.tabWraps[0].rankingId)">
                                {{ item.name }}
                            </div>
                            <p class="underline" ref="unline"></p>
                        </div>
                    </div>
                </div>
                <div class="menuList">
                    <!-- 左边的盒子 -->
                    <el-scrollbar class="scroll_H" style="background-color: #f6f6f6;">
                        <p v-if="rankList.length" v-for="(item, index) in rankList[ind].tabWraps" :key="index"
                            :class="isLeftAcive == index ? 'bgcolor left active' : 'left'"
                            @click="addLeftActive(index, item.rankingId)">
                            {{ item.name }}
                        </p>
                    </el-scrollbar>
                    <!-- 右边的内容 -->
                    <div class="right" ref="container" @scroll="handleScroll()">
                        <ul class="right_list">
                            <!-- 限制渲染条数,加载更快 -->
                            <li @click="HandleToDetail(item.id)" class="right_item" v-for="(item, index) in rankThreeList.slice(0,page)" :key="index">
                                <span class="num">
                                    {{ index + 1 }}
                                </span>
                                <div class="content">
                                    <div class="xm-album">
                                        <img :src="`https://imagev2.xmcdn.com/${item.cover}!op_type=5&device_type=ios&name=web_meduim&upload_type=cover&magick=webp`" alt="" class="img" />
                                    </div>
                                    <!-- 右边内容 -->
                                    <div class="content_c">
                                        <h3>
                                            {{ item.albumTitle }}
                                        </h3>
                                        <p>{{ item.salePoint }}</p>
                                        <div class="count">
                                            <span>
                                                <el-icon>
                                                    <svg t="1704847893639" class="icon" viewBox="0 0 1024 1024"
                                                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9305"
                                                        width="32" height="32">
                                                        <path
                                                            d="M899.117 526.883a30.04 30.04 0 0 1-3.976 5.365 29.922 29.922 0 0 1-1.548 1.58l-0.2 0.186a30.087 30.087 0 0 1-5.472 4.057L165.858 955.094c-0.047 0.027-0.1 0.046-0.143 0.073q-1.155 0.659-2.37 1.214c-0.145 0.066-0.289 0.132-0.434 0.2q-1.084 0.476-2.212 0.864c-0.238 0.083-0.475 0.165-0.713 0.241-0.645 0.205-1.3 0.386-1.963 0.548-0.348 0.085-0.7 0.168-1.044 0.24-0.56 0.116-1.126 0.213-1.7 0.3q-1.416 0.21-2.833 0.283h-0.016a29.977 29.977 0 0 1-4.5-0.107c-0.243-0.024-0.483-0.057-0.723-0.086a30.513 30.513 0 0 1-2.109-0.331 31.377 31.377 0 0 1-1.021-0.222c-0.6-0.139-1.191-0.293-1.78-0.469-0.331-0.1-0.658-0.2-0.984-0.315q-0.921-0.309-1.82-0.676c-0.241-0.1-0.479-0.2-0.716-0.307q-1.047-0.461-2.055-1c-0.108-0.058-0.215-0.118-0.322-0.177a29.753 29.753 0 0 1-8.652-7.174l-0.071-0.089a29.873 29.873 0 0 1-1.59-2.124c-0.3-0.439-0.589-0.885-0.866-1.34-0.108-0.179-0.233-0.341-0.338-0.524a29.859 29.859 0 0 1-4-16V95.886a30 30 0 0 1 44.981-26.984l722.265 417a30 30 0 0 1 10.988 40.981zM180.89 877.13l632.327-365.2L180.89 146.856V877.13z"
                                                            fill="#bfbfbf" p-id="9306"></path>
                                                    </svg>
                                                </el-icon>
                                                {{ (item.playCount.toString()).slice(0, 2) + '.' +
                                                    (item.playCount.toString()).slice(2, 4) }}亿
                                            </span>&nbsp;
                                            <span>
                                                <el-icon>
                                                    <svg t="1704848261625" class="icon" viewBox="0 0 1024 1024"
                                                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34544"
                                                        width="16" height="16">
                                                        <path
                                                            d="M512 940c-23.344 0-38.908-15.564-38.908-38.908V122.908c0-23.344 15.564-38.908 38.908-38.908s38.908 15.56 38.908 38.908v778.184c0 23.344-15.564 38.908-38.908 38.908z m194.544-155.636c-23.344 0-38.908-15.564-38.908-38.908V278.544c0-23.344 15.564-38.908 38.908-38.908 23.348 0 38.912 15.564 38.912 38.908v466.912c0 23.344-15.564 38.908-38.912 38.908zM122.908 667.636c-23.344 0-38.908-15.564-38.908-38.908V395.272c0-23.344 15.56-38.908 38.908-38.908s38.912 15.56 38.912 38.908v233.456c0 23.344-15.564 38.908-38.912 38.908z m778.184 0c-23.348 0-38.912-15.564-38.912-38.908V395.272c0-23.344 15.564-38.908 38.912-38.908 23.344 0 38.908 15.56 38.908 38.908v233.456c0 23.344-15.564 38.908-38.908 38.908z m-583.64 116.728c-23.344 0-38.908-15.564-38.908-38.908V278.544c0-23.344 15.564-38.908 38.912-38.908 23.344 0 38.908 15.564 38.908 38.908v466.912c0 23.344-15.564 38.908-38.908 38.908z"
                                                            fill="#8a8a8a" p-id="34545"></path>
                                                    </svg>
                                                </el-icon>
                                                {{ item.trackCount }}</span>
                                        </div>
                                    </div>
                                    <!-- <p>专辑播放量超69.5亿</p> -->
                                </div>
                            </li>
                            <li style="text-align: center;font-size: 16px;color: #ccc;" v-if="loading">正在加载...</li>
                            <li style="text-align: center;font-size: 16px;color: #fa2800;" v-if="rankThreeList.length == 100">
                                不要再划了,已经被你榨干了...</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { reqRankList, reqContentList } from '@/api/ranklist/index'
import {useRouter} from 'vue-router'
// 一二级分类的数据
const rankList = ref<any>([]); // 一级
const tabWrapsList = ref([]); // 二级
const rankThreeList = ref<any>([])
const sceneId = 1

// loading加载
const loading = ref(false)
// 获取container的ref
const container = ref()
let page = 20
const rankId = ref()

/*********** 点击滑动 **************/
const unline = ref();
const isActive = ref(0);
const isLeftAcive = ref(0);
const ind = ref(0);
const addActive = (index: number,rankId: number) => {
    // unline.value.style.width = 40 * (index - ind.value) + "px";
    // // unline.value.style.transform = "translateX(" + 0 + "px)";
    // // unline.value.style.width = 82 + "px";
    unline.value.style.transform = "translateX(-50%)";
    unline.value.style.left = 20 + 70 * index + "px";
    unline.value.style.width = 18 + "px";
    isActive.value = index;
    ind.value = index;

    // 点击一级分类,让左边的isLeftAcivew为0,默认第一个高亮
    isLeftAcive.value = 0
    
    // 点击一级,默认二级第一个id发送,获取右边的内容
    getContentList(rankId)
};
// 点击二级分类
const addLeftActive = (index: number, rankingId: number) => {
    isLeftAcive.value = index;
    getContentList(rankingId);
    // 右边内容区域滚动条置顶
    container.value.scrollTop = 0
};
onMounted(() => {
    getRankList(sceneId) // 一级二级分类
    getContentList(100006);// 二级分类 挂载默认100006发送请求
})

// 获取分类数据的功能函数
async function getRankList(sceneId: number) {
    try {
        let result = await reqRankList(sceneId)
        if (result.ret === 200) {
            rankList.value = result.data.tabLists
            // 获取一级分类的第一个的二级分类的第一个的rankingId,用来挂载时就发送一次请求,填充到右边的内容区域
            tabWrapsList.value = result.data.tabLists.tabWraps
        }
    } catch (error) {

    }
}

// 获取二级分类下的内容
async function getContentList(rankingId: number) {
    try {
        let result = await reqContentList(rankingId)
        if (result.ret === 200) {
            rankThreeList.value = result.data.rankList[0].albums
            rankId.value = result.data.rankingIds
        }
    } catch (error) {

    }
}
// 触底事件
const handleScroll = async () => {
    const containerRef = container.value;
    if (containerRef.scrollTop + containerRef.clientHeight >= containerRef.scrollHeight-1) {
        loading.value = true
        page += 10
        if (rankThreeList.value.length == 100) {
            loading.value = false
        }
    }
}

// 点击跳转到详情页
const router = useRouter();
// 路由传参id
const HandleToDetail = (Id: number)=>{
    router.push(`/detail?id=${Id}`)
}

</script>

<style scoped lang="less">
div{
    font-family: '华文楷体';
}
.container {
    width: 100%;
    height: 100%;
}

.container .top {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: space-around;
    line-height: 30px;
    padding-top: 15px;
}

.top-left {
    position: relative;
    top: 0px;
    width: 65px;
    height: 25px;
    overflow: hidden;
    margin-left: 10px;
}

.top-left img {
    position: absolute;
    left: -37%;
    width: 80px;
    height: 30px;
}

.top .search {
    width: 200px;
    height: 30px;
    border-radius: 20px;
    background-color: #eff1f4;
    position: relative;
}
.search i{
    position: absolute;
    top: 3px;
    left: 5px;
}
/* 搜索 */
.search span {
    font-size: 13px;
    position: absolute;
    left: 30px;
    color: #ababab;
}

.top-right {
    border: 1px solid #f86442;
    border-radius: 15px;
    color: #f86442;
    font-size: 10px;
    text-align: center;
}

.top-right span {
    padding: 8px 10px;
}

/deep/.el-scrollbar__thumb {
    //可设置滚动条颜色
    display: none;
}

html,
body {
    overflow-y: hidden;
    overflow-x: hidden;
}

/* 隐藏滚动条 */
.tabbar::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: transparent;
}

.tabbar::-webkit-scrollbar-thumb {
    background-color: transparent;
}

.tabbar::-webkit-scrollbar-track {
    background-color: transparent;
}

#award {
    // min-height: 100%;
    height: 100%;

    .top {
        .tabbar {
            z-index: 20;
            height: 50px;
            line-height: 50px;
            display: flex;
            overflow-x: scroll;
            position: relative;
            left: 0;
            // top: 50px;

            .scrollbar-flex-content {
                display: flex;
                position: relative;

                .scrollbar-demo-item {
                    flex-shrink: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 35px;
                    margin: 0 14px;
                    text-align: center;
                    border-radius: 4px;
                    font-size: 14px;
                    // position: relative;
                }

                .underline {
                    width: 18px;
                    height: 3px;
                    background: #f06742;
                    position: absolute;
                    bottom: 1.5px;
                    left: 0;
                    transition: all 0.5s;
                    border-radius: 3px;
                    display: block;
                    animation: test 1s linear;

                    @keyframes test {
                        0% {
                            width: 3px;
                        }

                        25% {
                            width: 23px;
                        }

                        50% {
                            width: 43px;
                        }

                        75% {
                            width: 62px;
                        }

                        100% {
                            width: 82px;
                        }
                    }
                }

                .tran {
                    animation: test 1s linear;

                    @keyframes test {
                        0% {
                            width: 3px;
                        }

                        25% {
                            width: 23px;
                        }

                        50% {
                            width: 43px;
                        }

                        75% {
                            width: 62px;
                        }

                        100% {
                            width: 82px;
                        }
                    }
                }
            }
        }

        .menuList {
            width: 100%;
            height: calc(100% - 100px);
            overflow: hidden;
            display: flex;
            justify-content: space-between;
            position: absolute;
            bottom: 0;

            .scroll_H {
                height: calc(100vh - 100px);
            }

            .left {
                display: block;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                text-align: center;
                font-size: 14px;
                padding: 15px 0;
                line-height: 20px;
                color: #72727b;
                position: relative;
                width: 1.9333rem;
                overflow: auto;

                &.active::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    width: 5px;
                    background-color: #f86442;
                }
            }

            .right {
                width: 100%;
                height: calc(100vh - 100px);
                // overflow: auto;
                overflow-y: scroll;

                .right_list {
                    min-height: 100%;

                    .right_item {
                        display: flex;

                        .content {
                            display: flex;
                            justify-content: space-evenly;
                            padding: 15px 10px 15px 0;
                            -webkit-box-sizing: border-box;
                            box-sizing: border-box;
                            max-width: 100%;

                            .xm-album {
                                width: 2.2667rem;
                                height: 70px;

                                .img {
                                    width: 1.8667rem;
                                    height: 70px;
                                    margin-right: 0.2667rem;
                                }
                            }

                            .content_c {
                                margin-right: 10px;

                                h3 {
                                    color: rgb(64, 64, 76);
                                    font-weight: 500;
                                    font-size: 16px;
                                    line-height: 1.38;
                                    overflow: hidden;
                                    display: -webkit-box;
                                    -webkit-line-clamp: 2;
                                    -webkit-box-orient: vertical;
                                    font-size: 16px;
                                }

                                p {
                                    margin: 5px 0 7px;
                                    font-size: 13px;
                                    line-height: 1.38;
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                    color: #999;
                                }

                                .count {
                                    font-size: 12px;
                                    line-height: 1.45;
                                    white-space: nowrap;
                                    color: #999;
                                }
                            }
                        }

                        .num {
                            margin: 18px 0;
                            -webkit-box-flex: 0;
                            -ms-flex: 0 0 34px;
                            flex: 0 0 34px;
                            height: 19px;
                            line-height: 19px;
                            color: #40404c;
                            text-align: center;
                            font-size: 16px;
                            font-weight: 600;
                        }

                        &:not(:nth-child(n + 4)) .num {
                            background: 50%/18px no-repeat;
                            font-size: 0;
                        }

                        &:first-child .num {
                            background-image: url("https://s1.xmcdn.com/yx/ximalaya-mobile-resource/last/dist/images/img_rank_first_4dd5bad.png");
                        }

                        &:nth-child(2) .num {
                            background-image: url("https://s1.xmcdn.com/yx/ximalaya-mobile-resource/last/dist/images/img_rank_second_977bd19.png");
                        }

                        &:nth-child(3) .num {
                            background-image: url("https://s1.xmcdn.com/yx/ximalaya-mobile-resource/last/dist/images/img_rank_third_1a96b0c.png");
                        }
                    }
                }
            }
        }
    }
}

.bgcolor {
    background-color: #fff;
}
</style>